<template>
    <!--
        部门选择器
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <div>
       
        <el-table
            sum-text="sum"
            index-text="#"
            :data="treeList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :default-expand-all="props.defaultExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                prop="name"
                label="名称"
                show-overflow-tooltip 
                min-width="160">
            </el-table-column>
            <el-table-column
                    label="类型"
                    show-overflow-tooltip 
                    min-width="160"
            >
                <template slot-scope="scope">
                    <span class="label label-lg font-weight-bold label-light-primary label-inline"  v-if="scope.row.tempObject == 'Sources'">资源</span>
                    <span class="label label-lg font-weight-bold label-light-info label-inline"  v-if="scope.row.tempObject == 'Function'">功能</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="数据权限"
                    show-overflow-tooltip 
                    min-width="160"
            >
                <template slot-scope="scope">
                    <div class="symbol symbol-30 symbol-circle symbol-light-primary" v-if="scope.row.integerappend.split(',')[0] == '0'">									
                        <span class="symbol-label font-size-h8">是</span>								
                    </div>
                    <div class="symbol symbol-30 symbol-circle symbol-light-info" v-if="scope.row.integerappend.split(',')[0] == '1'">									
                        <span class="symbol-label font-size-h8">否</span>								
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    label="拦截类型"
                    show-overflow-tooltip 
                    min-width="160"
            >
                <template slot-scope="scope">               
                    <span class=" label label-lg font-weight-bold label-light-primary label-inline"  v-if="scope.row.integerappend.split(',')[1] == '0'">无需拦截</span>
                    <span class="label label-lg font-weight-bold label-light-info label-inline"  v-if="scope.row.integerappend.split(',')[1] == '1'">必须拦截</span>
                </template>
            </el-table-column>
           
            <el-table-column
                    label="操作"
                    min-width="160"
            >
                <template slot-scope="scope">
                    <a href="javascript:;" @click="addMenuInfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="添加子资源" v-if="scope.row.tempObject == 'Sources' && scope.row.children.length !=0 ">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M12,3 C12.5522847,3 13,3.44771525 13,4 L13,5 C13,5.55228475 12.5522847,6 12,
                                    6 C11.4477153,6 11,5.55228475 11,5 L11,4 C11,3.44771525 11.4477153,3 12,3 Z M12,8 C12.5522847,8 13,
                                    8.44771525 13,9 L13,10 C13,10.5522847 12.5522847,11 12,11 C11.4477153,11 11,10.5522847 11,10 L11,
                                    9 C11,8.44771525 11.4477153,8 12,8 Z M12,13 C12.5522847,13 13,13.4477153 13,14 L13,15 C13,
                                    15.5522847 12.5522847,16 12,16 C11.4477153,16 11,15.5522847 11,15 L11,14 C11,13.4477153 11.4477153,
                                    13 12,13 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,20 C13,20.5522847 12.5522847,21 12,
                                    21 C11.4477153,21 11,20.5522847 11,20 L11,19 C11,18.4477153 11.4477153,18 12,18 Z" fill="#000000"/>
                                    <path d="M21,9.04031242 L21,14.9596876 C21,15.23583 20.7761424,15.4596876 20.5,15.4596876 C20.3864643,
                                    15.4596876 20.276309,15.4210472 20.1876525,15.350122 L16.488043,12.3904344 C16.272412,
                                    12.2179296 16.2374514,11.9032834 16.4099561,11.6876525 C16.433022,11.6588201 16.4592107,
                                    11.6326315 16.488043,11.6095656 L20.1876525,8.64987802 C20.4032834,8.47737324 20.7179296,
                                    8.51233393 20.8904344,8.7279649 C20.9613596,8.81662142 21,8.92677668 21,9.04031242 Z M3,14.9596876 L3,9.04031242 C3,8.76417005 3.22385763,8.54031242 3.5,8.54031242 C3.61353575,8.54031242 3.723691,
                                    8.5789528 3.81234752,8.64987802 L7.51195699,11.6095656 C7.72758796,11.7820704 7.76254865,12.0967166 7.59004388,
                                    12.3123475 C7.56697799,12.3411799 7.54078935,12.3673685 7.51195699,12.3904344 L3.81234752,15.350122 C3.59671656,
                                    15.5226268 3.28207037,15.4876661 3.1095656,15.2720351 C3.03864038,15.1833786 3,15.0732233 3,14.9596876 Z" fill="#000000" opacity="0.3"/>
                                </g>
                            </svg>
                        </span>				
                    </a>

                    <a href="javascript:;" @click="chMenuInfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="设为一级资源" v-if="scope.row.tempObject == 'Sources'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M19,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,
                                    13 L19,13 C18.4477153,13 18,12.5522847 18,12 C18,11.4477153 18.4477153,11 19,11 Z M3,11 L5,
                                    11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L3,13 C2.44771525,13 2,
                                    12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z M12,2 C12.5522847,2 13,2.44771525 13,3 L13,
                                    5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,6 11,5.55228475 11,5 L11,3 C11,
                                    2.44771525 11.4477153,2 12,2 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,21 C13,
                                    21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19 C11,
                                    18.4477153 11.4477153,18 12,18 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <circle fill="#000000" cx="12" cy="12" r="3"/>
                                </g>
                            </svg></span>				
                    </a>
                    <a href="javascript:;" @click="updateXtMenuinfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="编辑资源" v-if="scope.row.tempObject == 'Sources'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                        
                                    <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                    <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,
                                        2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,
                                        5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,
                                        19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) ">
                                    </path>	                                        
                                    <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"></rect>	                                    
                                </g>	                                
                            </svg>                           
                        </span>							
                    </a>
                    <a href="javascript:;" @click="delXtMenuinfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="删除资源" v-if="scope.row.tempObject == 'Sources'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                       
                                    <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                    <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" 
                                    fill="#000000" fill-rule="nonzero"></path>	                                        
                                    <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                        4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                        6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3">
                                    </path>	                                    
                                </g>	                                
                            </svg>	                        
                        </span>							
                    </a>
                    <a href="javascript:;" @click="exportOauthResources(scope.row)" class="btn btn-sm btn-clean btn-icon" title="导出资源" v-if="scope.row.tempObject == 'Sources'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <rect fill="#000000" opacity="0.3" x="11" y="3" width="2" height="14" rx="1"/>
                                    <path d="M6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,
                                    10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L11.2928932,
                                    3.29289322 C11.6714722,2.91431428 12.2810586,2.90106866 12.6757246,3.26284586 L18.6757246,
                                    8.76284586 C19.0828436,9.13603827 19.1103465,9.76860564 18.7371541,10.1757246 C18.3639617,10.5828436 17.7313944,10.6103465 17.3242754,10.2371541 L12.0300757,5.38413782 L6.70710678,10.7071068 Z" fill="#000000" fill-rule="nonzero"/>
                                    <rect fill="#000000" opacity="0.3" x="3" y="19" width="18" height="2" rx="1"/>
                                </g>
                            </svg>
                        </span>						
                    </a>

                    <a href="javascript:;" @click="getOauthResourcesDetail(scope.row)" class="btn btn-sm btn-clean btn-icon" title="详情" v-if="scope.row.tempObject == 'Sources'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <path d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z" fill="#000000" fill-rule="nonzero"/>
                                <path d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z" fill="#000000" fill-rule="nonzero"/>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) " x="3.02462111" y="11.4246212" width="19" height="2"/>
                            </g>
                        </svg>
                        </span>		
                    </a>
                </template>
            </el-table-column>
        </el-table>
        <OauthResourcesAdd ref="oauthResourcesAddRef" @change="reload"></OauthResourcesAdd>
        <OauthResourcesUpdate ref="oauthResourcesUpdateRef" @change="reload"></OauthResourcesUpdate>
        <OauthResourcesDetail ref="oauthResourcesDetailRef" @change="reload"></OauthResourcesDetail>
    </div>
</template>

<script>
  import apiUtil from "@/core/util/apiUtil.js";   
  import OauthResourcesAdd from "@/view/oauth/oauth-resources/oauth-resources-add.vue";
  import OauthResourcesUpdate from "@/view/oauth/oauth-resources/oauth-resources-update.vue";
  import OauthResourcesDetail from "@/view/oauth/oauth-resources/oauth-resources-detail.vue";
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating,downloadFileCallFn} from "@/core/util/jehcUtil.js";
    export default {
        data() {
            return {
                treeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'text'
                },
                props: {
                    defaultExpandAll:false
                },                
            }
        },
        components: {
            OauthResourcesAdd,
            OauthResourcesUpdate,
            OauthResourcesDetail,
        },
        mounted() {
            this.initTree();
        },
        props:{
            data:{

            }
        },
        methods: { 
            reload(data){
                this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
            },
            addMenuInfo(row){
                this.$refs.oauthResourcesAddRef.showModal(row);
            },
            updateXtMenuinfo(row){
                this.$refs.oauthResourcesUpdateRef.showModal(row.buessid);
            },  
            getOauthResourcesDetail(row){
                this.$refs.oauthResourcesDetailRef.showModal(row.buessid);
            },
            delXtMenuinfo(row){
                if(row.buessid === "" || row.buessid === null){
                    handleAlert("数据不存在！", "warning", 3)
                    return;
                }
                // 删除前提示
                this.$confirm("确认删除?", "提示", {type: "warning",}).then(() => {                    
                    var params = { resources_id: row.buessid};    
                    // 根据后台想要的参数格式选择
                    apiUtil.delete(process.env.VUE_APP_OAUTH_API+'/oauthResources/delete',params).then(data=>{
                        if(data.data.success){
                            handleAlert("删除成功", "success", 3);
                            this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
                        }else {
                            handleAlert("删除失败", "error", 3);
                        }
                    });
                }).catch(()=>{});//注意这里，这里是重点！！！;  
            },   
            chMenuInfo(row){
                // 保存前提示
                this.$confirm("确定将资源"+row.name+"设为一级资源?", "提示", {type: "warning",}).then(() => {
                    apiUtil.get(process.env.VUE_APP_OAUTH_API+"/oauthResources/chMenuInfo", {resources_id:row.buessid}).then(({ data }) => {
                        if(data.success){
                            handleAlert("设置成功", "success", 3);
                            this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式
                        }else {
                            handleAlert("设置失败", "error", 3);
                        }            
                    });
                }).catch(()=>{});//注意这里，这里是重点！！！;   
            },     
            exportOauthResources(row){
                console.log(row);
                this.$confirm("确定导出资源："+row.name+"?", "提示", {type: "warning",}).then(() => {
                    let url = process.env.VUE_APP_OAUTH_API+'/oauthResources/export?resources_id='+row.buessid; // 请求接口
                    let method = "GET"; // 请求方式 GET或POST
                    let fileName = row.name+".json"; // 下载后的文件名称
                    var params = "name='test" // 后台接口需要的参数
                    downloadFileCallFn(url, method, fileName,params);
                }).catch(()=>{});//注意这里，这里是重点！！！;   
                
            },
            initTree(){
                showWating({renderBody:"orgBody"});
                apiUtil.query(process.env.VUE_APP_OAUTH_API+"/oauthResources/all/list?sys_mode_id="+this.data.sys_mode_id, {}).then(({ data }) => {
                    let result = JSON.parse(data.data);
                    this.toTreeData(result)
                });
            },
            authorFormatter(integerappend){
                if(integerappend != null && integerappend != ""){
                    var val = integerappend.split(",");
                    if(val[0] == 0){
                        return "是";
                    }else if(val[0] == 1){
                        return "否";
                    }
                }
            },
            toTreeData(data) {
                const parent = []
                for (let i = 0; i < data.length; i++) {
                    if (!data[i].parentId) {
                    parent.push({
                        ...data[i],
                        id: data[i].id,
                        label: data[i].name,
                        children: []
                    })
                    }
                }
                this.childrenTree(parent, data)
                },
                childrenTree(parent, data) {
                if (data) {
                    for (let i = 0; i < parent.length; i++) {
                    for (let j = 0; j < data.length; j++) {
                        if (parent[i].id === data[j].parentId) {
                        parent[i].children.push({
                            ...data[j],
                            id: data[j].id,
                            label: data[j].name,
                            children: []
                        })
                        }
                    }
                    this.childrenTree(parent[i].children, data)
                    }
                }
                this.treeList = parent
            },
        }
    }
</script>

<style>
</style>